<script setup lang="ts">
import { useRouter } from 'vitepress';
import useSearchHistory from '@/composables/useSearchHistory';
const router = useRouter();

defineProps<{
  searchValue: string;
  recommendData: any[];
}>();
const emits = defineEmits(['click-outside'])
// -------------------- 搜索历史 --------------------

const searchHistory = useSearchHistory();
const handleSearch = (searchValue: string) => {
  searchHistory.add(searchValue);
  emits('click-outside');
  location.href = '/search/result?keyword=' + searchValue;
};

</script>

<template>
  <div v-if="recommendData.length && searchValue" class="search-recommend">
    <div
      v-for="item in recommendData"
      class="recommend-item"
      :key="item.key"
      @click="handleSearch(item.key)">
      <span v-dompurify-html="item.strs"></span>
    </div>
  </div>
</template>

<style scoped lang="scss">
.search-recommend {
  margin-bottom: var(--o-gap-3);

  .recommend-item {
    font-size: 14px;
    line-height: 32px;
    padding-left: var(--o-gap-2);
    cursor: pointer;

    .search-key {
      color: var(--o-color-ubmc);
    }

    @include hover {
      background-color: var(--o-color-control2-light);
      border-radius: var(--o-radius-s);
    }
  }
}
</style>